<template>
    <div>
        <h1>计数器</h1>
        <div>{{ num }}</div>
        <div>{{ doubleNum }}</div>
        <button @click="increment">同步调用+</button>
        <button @click="incrementAsync">异步调用</button>
    </div>
</template>

<script lang='ts' setup>
    import useCounterStore from '@/store/counter'
    import {storeToRefs} from 'pinia'
    const store=useCounterStore()
    //如下的解构操作破坏了响应式，所以后面的操作无法动态的更新
    let {num,doubleNum}=storeToRefs(store)
    //解构出方法
    const {increment,incrementAsync}=store
    
</script>

<style lang='scss' scoped>
</style>